<template>
  <div class="record-container">
    <!-- 搜索和分页控件 -->
    <div class="searchBox">
      <el-form :inline="true" :model="queryParams" class="demoFormInline">
        <el-form-item label="企业名称">
          <el-input v-model="queryParams.companyName" placeholder="请输入企业名称" />
        </el-form-item>

        <el-form-item>
          <el-button icon="Search" type="primary" @click="handleSearch">查询</el-button>
          <el-button icon="Refresh" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <div class="tableContainer">
      <el-table :data="tableData" border style="width: 100%" v-loading="loading">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="businessDeveloper" label="原招商员" min-width="80" />
        <el-table-column
          prop="companyName"
          label="目标企业"
          min-width="200"
          show-overflow-tooltip
        />
        <el-table-column
          prop="contactPerson"
          label="联系人"
          min-width="80"
          show-overflow-tooltip
        />
        <el-table-column prop="contactPhone" label="手机号" min-width="120" />
        <el-table-column prop="intentionProject" label="原项目意向" min-width="120" />
        <el-table-column prop="checkInType" label="入驻形态" min-width="120" />
        <el-table-column prop="customerSource" label="信息来源" min-width="120" />
        <el-table-column prop="estimatedTax" label="预计税收(万）" min-width="110" />
        <el-table-column prop="submitter" label="原创建人" min-width="100" />
        <el-table-column
          prop="reportTime"
          label="原报备时间"
          min-width="150"
          show-overflow-tooltip
        />
        <el-table-column prop="status" label="状态" min-width="100" />
        <el-table-column
          prop="abandonTime"
          label="退回时间"
          min-width="150"
          show-overflow-tooltip
        />
        <el-table-column
          prop="abandonReason"
          label="退回原因"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button type="primary" link @click="rescueOperation(scope.row)"
              >捞取</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="fetchData"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { getFContactInfoList, rescue } from "@/api/AttractInvestment/customer/index.js";

// 路由
const router = useRouter();

//捞取↓
// 添加 rescue 方法
const rescueOperation = async (row) => {
  try {
    // 调用 API 发送整行数据
    const res = await rescue(row);

    if (res.code === 200) {
      ElMessage.success("捞取成功");
      // 刷新列表数据
      fetchData();
    } else {
      ElMessage.error(res.msg || "捞取失败");
    }
  } catch (error) {
    ElMessage.error("请求失败，请重试");
    console.error("捞取失败:", error);
  }
};
//捞取↑
// 查询参数
const queryParams = reactive({
  companyName: "",
  pageNum: 1,
  pageSize: 10,
});

// 表格数据
const tableData = ref([]);
// 分页信息
const total = ref(0);
// 加载状态
const loading = ref(false);

// 查看企业详情
const viewCompanyDetail = (row) => {
  router.push({
    path: "/lookCompany",
    query: {
      companyId: row.companyId,
    },
  });
};

// 获取数据
const fetchData = async () => {
  loading.value = true;
  try {
    const res = await getFContactInfoList(queryParams);
    if (res && res.code == 200 && res.data) {
      const pageData = res.data;
      // 防御性处理，确保rows为数组
      let rows = [];
      if (Array.isArray(pageData.rows)) {
        rows = pageData.records;
      } else if (
        pageData.records &&
        typeof pageData.records === "object" &&
        typeof pageData.records.length === "number"
      ) {
        rows = Array.from(pageData.records);
      }
      tableData.value = rows;
      total.value = pageData.total || 0;
    } else {
      tableData.value = [];
      total.value = 0;
    }
  } catch (error) {
    console.error("获取企业列表失败:", error);
    tableData.value = [];
    total.value = 0;
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  queryParams.pageNum = 1;
  fetchData();
};

// 重置表单
const resetForm = () => {
  // 重置查询参数
  Object.assign(queryParams, {
    companyName: "",
    customerCode: "",
    contactPerson: "",
    contactPhone: "",
    industry: "",
    settlementType: "",
    pageNum: 1,
    pageSize: 10,
  });
  fetchData();
};

// 组件挂载时获取数据
onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.record-container {
  padding: 20px;
}

.searchBox {
  margin-bottom: 20px;
}

.tableContainer {
  margin-bottom: 20px;
}
</style>
